<html xmlns="http://www.w3.org/1999/xhtml"  wicket:id="calendarBorder" >
	<div wicket:id="user-status" id="user-status">
		Hello, some_person | <a href="#">Account</a> | <a href="#">Sign out</a>
	</div>
		
	<div id="crud-nav">
		<ul>
			<li><a href="#" wicket:id="viewCalendars">View Calendars</a></li> |
			<li><a href="#" wicket:id="createCalendar">Create Calendar</a></li> |
			<li><a href="#" wicket:id="createEvent">Create Event</a></li> |
			<li><a href="#" wicket:id="editCalendar">Edit Calendar</a></li> |
			<li><a href="#" wicket:id="editEvent">Edit Event</a></li> |
			<li><a href="#" wicket:id="shareCalendar">Share Calendar</a></li> |
			<li><a href="#" wicket:id="shareEvent">Share Event</a></li>
		</ul>
	</div>
	
	<div id="month_view">
		<div wicket:id="calendar_name"></div>
		<div class="cell heading">Monday</div>
		<div class="cell heading">Tuesday</div>
		<div class="cell heading">Wednesday</div>
		<div class="cell heading">Thursday</div>
		<div class="cell heading">Friday</div>
		<div class="cell heading">Saturday</div>
		<div class="cell heading">Sunday</div>
		<div wicket:id="day_div" class="cell">
			<span wicket:id="date" class="date"></span><br/>
			<div wicket:id="events" >
				<a wicket:id="name" onclick="return false;" class="qTip" href="#"></a>
				<div wicket:id="details" class="hidden">
					<div><b>Start Time: </b><span wicket:id="startDate"></span></div>
					<div><b>End Time: </b><span wicket:id="endDate"></span></div>
					<br/>
					<div><b>Description:</b></div>
					<div wicket:id="desc"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	// Create the tooltips only on document load
	$(document).ready(function() {
   		$('a.qTip').each(function(){
   		 $(this).qtip({
   	         content: {
   	            prerender: true,
   	            text: $(this).parent().find('.hidden').html(),
   	            title: {
   	               text: 'Details',
   	               button: 'close'}
   	         },
   	      	show: { 
   	            when: 'click',
   	            effect: {
   	              type: 'fade',
   	              length: 150
   	            },
   	            delay: '0',
   	            solo: true // Only show one tooltip at a time
   	         },
   	      hide: { 
   	            effect: function () {
   	                  $(this).hide("drop", { direction: "down", distance : 10 }, 150);
   	            },
   	            when:{
   	              target: $('.close_qtip')
   	            }
   	         },
   	      style: {
   	            tip: true,
   	            border: {
   	               width: 0,
   	               radius: 3
   	            },
   	            name: 'dark', // Use the default light style
   	            width: 250 // Set the tooltip width
   	         },
   	      position: {
   	            corner: {
   	               tooltip: 'bottomMiddle'
   	            },
   	            target: 'mouse',
   	            adjust: {
   	               screen: true,
   	               mouse: false
   	            }
   	         }
   	   	          	   	  
   	  	 });
   	  });
	});
	</script>
</html>

